<template>
  <div class="demo">
    <div class="box">
      <div class="fistline">
        <div class="fistline-left">
          <img src="./image/02.png" alt="" />
        </div>
        <div class="fistline-right">扫码登录更快捷</div>
      </div>
      <div class="secondline">
        <div class="phone">手机号登录</div>
        <i>|</i>
        <div class="emil">邮箱登录</div>
      </div>
      <div class="threeline">
        <div class="user">
          <a href="">使用密码登录</a>
        </div>
        <div class="from">
          <ValidationObserver v-slot="{ handleSubmit }">
            <form @submit.prevent="handleSubmit(onSubmit)">
              <ValidationProvider
                name="phone"
                rules="phoneRequired|phone"
                v-slot="{ errors }"
                mode="lazy"
              >
                <input
                  class="phone"
                  type="text"
                  placeholder="请输入手机号"
                  v-model="user.phone"
                />
                <span class="form-tips">{{ errors[0] }}</span>
              </ValidationProvider>
              <ValidationProvider
                name="password"
                rules="passwordRequired|password"
                v-slot="{ errors }"
                mode="lazy"
              >
                <input
                  class="password"
                  type="text"
                  placeholder="请输入密码"
                  v-model="user.password"
                />
                <span>{{ errors[0] }}</span>
              </ValidationProvider>
              <button>手机号快捷登录</button>
            </form>
          </ValidationObserver>
        </div>
        <div class="setting clearFix">
          <label class="checkbox inline">
            <input name="m1" type="checkbox" value="2" checked="" />
          </label>
          <span class="forget">我同意 《服务条款》和 《网易隐私政策》</span>
        </div>
      </div>
      <div class="tubiao">
        <div class="tubiao-left">
          <div class="tubiao-img">
            <img src="./image/weixin2.png" alt="" />
          </div>
          <div>
            <img src="./image/qq.png" alt="" />
          </div>
          <div>
            <img src="./image/ali.png" alt="" />
          </div>
          <div>
            <img src="./image/sina.png" alt="" />
          </div>
        </div>
        <div class="tubiao-right">
          <span><a href="">遇到问题?</a></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import { mapActions } from 'vuex'
import '@/utils/rules'
export default {
  name: 'Login',
  components: { ValidationProvider, ValidationObserver },
  data() {
    return {
      user: {
        phone: '',
        password: '',
      },
    }
  },
  methods: {
    ...mapActions('user', ['reqLogin']),
    async onSubmit() {
      const { phone, password } = this.user
      await this.reqLogin({ phone, password })
      // 登录成功后跳转到首页或者原来的页面
      this.$router.history.push(this.$route.query.redirect || '/')
    },
  },
}
</script>

<style lang="less" scoped>
.demo {
	border: 1px solid transparent;
	// position: fixed;
	// top: 0;
	// left: 0;
	// width: 100%;
	// height: 600px;
	// background-color: #fff;
	background-image: url("./image/addshopping.jpg");
}
.box {
	margin-top: 85px;
	width: 384px;
	height: 480px;
	/* padding:58px 40px 83px; */
	// border: 1px solid red;
	margin-left: 1000px;
	background-color: #fff;
	/* flex-direction:row-reverse; */
}
.fistline {
	display: flex;
}
.fistline .fistline-left img {
	width: 60px;
	height: 60px;
}
.fistline .fistline-right {
	width: 97px;
	height: 19px;
	color: #bfae8c;
	background-color: #f4f2ed;
	font-size: 13px;
	border: 1px solid #bfae8c;
	border-radius: 2px;
	margin-top: 5px;
}
.secondline {
	display: flex;
	width: 306px;
	height: 20px;
	margin-top: -15px;
	/*padding:42px 0 10px;*/
	justify-content: center;
}
.secondline i {
	width: 1px;
	height: 20px;
	color: #3333;
	text-align: center;
	margin: 0 0 0 30px;
}
.secondline .phone {
	/* width:90px;
    height:18px;*/
	margin: 0 0 0 50px;
	font-size: 18px;
	color: black;
}
.secondline .emil {
	/* width:72px;
    height:18px;*/
	margin: 0 0 0 30px;
	color: #9999;
	font-size: 18px;
}

.threeline {
	width: 300px;
	height: 329px;
	/* margin-right:-100px; */
	/* padding:10px 40px 83px; */
	padding: 10px 35px 10px;
	text-align: center;
	// border: 1px solid red;
}
.threeline .user {
	width: 130px;
	height: 26px;
	font-size: 12px;
	margin-left: 230px;
	// display: none;
	// text-decoration:none;
}
.threeline .user a {
	text-decoration: none;
}
.from input {
	width: 290px;
	height: 38px;
	font-size: 12px;
	/* padding:10px 0 10px 0; */
}
.from .phone {
	margin: 0 0 20px;
}
.from .password {
	margin: 0 0 20px;
}
.from button {
	width: 300px;
	height: 48px;
	font-size: 18px;
	color: #fff;
	background-color: #b4a078;
	margin: 0 0 10px;
}
.form-tips {
  color: red;
  font-size: 12px;
}
.setting .forget {
	font-size: 12px;
}

.tubiao {
	display: flex;
	justify-content: space-between;
	width: 360px;
	height: 60px;
	background-color: #f5f3ef;
	padding: 0 25px 0 0;
	// border: 1px solid red;
}
.tubiao .tubiao-left {
	display: flex;
	margin: 0 0 0 30px;
}
.from-yanzhengma {
	display: flex;
	// margin:0 0 0 30px;
}
.from-yanzhengma .password2 {
	width: 211px;
	height: 38px;
}
.from-yanzhengma .btn {
	width: 89px;
	height: 42px;
	font-size: 14px;
	background-color: #eeee;
	color: black;
}
.tubiao img {
	width: 30px;
	height: 30px;
	padding: 10px 10px 10px 0;
	// text-align:center;
	background-color: #f5f3ef;
}
.tubiao .tubiao-right {
	display: block;
	text-align: center;
	font-size: 12px;
	padding: 0 0 25px 0;
	margin-top: 30px;
}
.tubiao .tubiao-right a {
	text-decoration: none;
}
</style>
